<template lang="pug">
  Form(ref='loginSet',:model='formValidate',:rules='ruleValidate',:label-width='180',style='width:50%')
    FormItem(label='登录地址：',prop='loginUrl')
      Input(v-model='formValidate.loginUrl',:maxlength='200')
    FormItem(label='类型选择规则：',prop='selectionTypeRule')
      Input(v-model='formValidate.selectionTypeRule',:maxlength='200')
    FormItem(label='参数1输入框规则：',prop='inputParameter1Rule')
      Input(v-model='formValidate.inputParameter1Rule',:maxlength='200')
    FormItem(label='参数1名称：',prop='inputParameter1Name')
      Input(v-model='formValidate.inputParameter1Name',:maxlength='200')
    FormItem(label='参数2输入框规则：', prop='inputParameter2Rule')
      Input(v-model='formValidate.inputParameter2Rule',:maxlength='200')
    FormItem(label='参数2名称：',prop='inputParameter2Name')
      Input(v-model='formValidate.inputParameter2Name',:maxlength='200')
    FormItem(label='参数3输入框规则：',prop='inputParameter3Rule')
      Input(v-model='formValidate.inputParameter3Rule',:maxlength='200')
    FormItem(label='参数3名称：',prop='inputParameter3Name')
      Input(v-model='formValidate.inputParameter3Name',:maxlength='200')
    FormItem(label='参数4输入框规则：',prop='inputParameter4Rule')
      Input(v-model='formValidate.inputParameter4Rule',:maxlength='200')
    FormItem(label='参数4名称：',prop='inputParameter4Name')
      Input(v-model='formValidate.inputParameter4Name',:maxlength='200')
    FormItem(label='验证码类型',prop='authCodeType')
      Select(v-model='formValidate.authCodeType')
        Option(v-for="(type, index) in types",:value='type.value',:key="index") {{type.label}}
    FormItem(v-if="formValidate.authCodeType===1||formValidate.authCodeType===3",label='图像验证码类型：',prop='imgCodeType')
      Select(v-model='formValidate.imgCodeType')
        Option(v-for="(type, index) in cityImgCodeType",:value='type.citySocialSecurity',:key="index") {{type.citySocialSecurity}}
    FormItem(v-if="formValidate.authCodeType===1||formValidate.authCodeType===3",label='图像验证码输入框规则：',prop='inputAuthCodeRule')
      Input(v-model='formValidate.inputAuthCodeRule',:maxlength='200')
    FormItem(v-if="formValidate.authCodeType===1||formValidate.authCodeType===3",label='图像验证码位置规则：',prop='authCodeRule')
      Input(v-model='formValidate.authCodeRule',:maxlength='200')
    FormItem(v-if="formValidate.authCodeType===1||formValidate.authCodeType===3",label='图像获取验证码url：',prop='getAuthCodeUrl')
      Input(v-model='formValidate.getAuthCodeUrl',:maxlength='200')
    FormItem(v-if="formValidate.authCodeType===2||formValidate.authCodeType===3",label='短信验证码输入框规则：',prop='smsInputRule')
      Input(v-model='formValidate.smsInputRule',:maxlength='200')
    FormItem(v-if="formValidate.authCodeType===2||formValidate.authCodeType===3",label='短信验证码发送按钮：',prop='sendSmsRule')
      Input(v-model='formValidate.sendSmsRule',:maxlength='200')
    FormItem(v-if="formValidate.authCodeType===4",label='滑块位置规则：',prop='sliderPosition')
      Input(v-model='formValidate.sliderPosition',:maxlength='200')
    FormItem(label='登录按钮规则：',prop='submitButtonRule',required)
      Input(v-model='formValidate.submitButtonRule',:maxlength='200')
    FormItem(label='登录最大等待时间：',prop='loginMaxWaitTime')
      Select(v-model='formValidate.loginMaxWaitTime')
        Option(v-for="(time, index) in times",:value='time.value',:key="index") {{time.label}}
    FormItem(label='登录成功判定规则/样式：',prop='loginSuccessJudgeRule',required)
      Input(v-model='formValidate.loginSuccessJudgeRule',:maxlength='200')
</template>

<script>
import { asyncSite } from '../../api'

export default {
  data() {
    const validateParameter1 = (rule, value, callback) => {
      if (this.formValidate.inputParameter1Rule !== '' && this.formValidate.inputParameter1Name === '') {
        return callback(new Error('参数1规则不为空时，参数1名称不能为空'))
      }
      callback()
    }
    const validateParameter2 = (rule, value, callback) => {
      if (this.formValidate.inputParameter2Rule !== '' && this.formValidate.inputParameter2Name === '') {
        return callback(new Error('参数2规则不为空时，参数2名称不能为空'))
      }
      callback()
    }
    const validateParameter3 = (rule, value, callback) => {
      if (this.formValidate.inputParameter3Rule !== '' && this.formValidate.inputParameter3Name === '') {
        return callback(new Error('参数3规则不为空时，参数3名称不能为空'))
      }
      callback()
    }
    const validateParameter4 = (rule, value, callback) => {
      if (this.formValidate.inputParameter4Rule !== '' && this.formValidate.inputParameter4Name === '') {
        return callback(new Error('参数4规则不为空时，参数4名称不能为空'))
      }
      callback()
    }
    return {
      types: [{ value: 0, label: '没有验证码' }, { value: 1, label: '图像验证码' }, { value: 2, label: '短信验证码' }, { value: 3, label: '图像加短信验证码' }],
      times: [{ value: 3, label: '3s' }, { value: 6, label: '6s' }, { value: 10, label: '10s' }, { value: 30, label: '30s' }, { value: 60, label: '60s' }],
      cityImgCodeType: [],
      formValidate: {
        loginUrl: '',
        selectionTypeRule: '',
        inputParameter1Rule: '',
        inputParameter2Rule: '',
        inputParameter3Rule: '',
        inputParameter4Rule: '',
        inputParameter1Name: '',
        inputParameter2Name: '',
        inputParameter3Name: '',
        inputParameter4Name: '',
        authCodeType: 0,
        imgCodeType: '',
        inputAuthCodeRule: '',
        authCodeRule: '',
        getAuthCodeUrl: '',
        smsInputRule: '',
        sendSmsRule: '',
        sliderPosition: '',
        submitButtonRule: '',
        loginMaxWaitTime: 3,
        loginSuccessJudgeRule: '',
        siteId: this.$route.query.siteId
      },
      ruleValidate: {
        loginUrl: [{ required: true, message: '请输入登录地址', trigger: 'blur' }, { type: 'url', message: '登录地址格式错误,非正确url格式', trigger: 'blur' }],
        inputParameter1Rule: [{ required: true, message: '请输入输入框规则', trigger: 'blur' }],
        inputParameter2Rule: [{ required: true, message: '请输入输入框规则', trigger: 'blur' }],
        inputParameter1Name: [{ validator: validateParameter1, trigger: 'blur' }],
        inputParameter2Name: [{ validator: validateParameter2, trigger: 'blur' }],
        inputParameter3Name: [{ validator: validateParameter3, trigger: 'blur' }],
        inputParameter4Name: [{ validator: validateParameter4, trigger: 'blur' }],
        imgCodeType: [{ required: true, message: '请选择图像验证码类型', trigger: 'blur' }],
        inputAuthCodeRule: [{ required: true, message: '请输入验证码输入框规则', trigger: 'blur' }],
        getAuthCodeUrl: [{ type: 'url', message: '获取验证码url格式错误,非正确url格式', trigger: 'blur' }],
        smsInputRule: [{ required: true, message: '请输入短信验证码输入框规则', trigger: 'blur' }],
        sendSmsRule: [{ required: true, message: '请输入短信验证码发送按钮规则', trigger: 'blur' }],
        sliderPosition: [{ required: true, message: '请输入滑块位置规则', trigger: 'blur' }],
        submitButtonRule: [{ required: true, message: '请输入登录按钮规则', trigger: 'blur' }],
        loginSuccessJudgeRule: [{ required: true, message: '请输入登录成功判定规则/样式', trigger: 'blur' }]
      }
    }
  },
  created() {
    ;(async () => {
      const [securityLoginQueryData, citySocialSecurityData] = await Promise.all([
        asyncSite.securityLoginQuery({ data: { siteId: this.$route.query.siteId } }),
        asyncSite.citySocialSecurity({ data: {} })
      ])
      if (securityLoginQueryData.data.data !== null) {
        ;({
          loginUrl: this.formValidate.loginUrl,
          selectionTypeRule: this.formValidate.selectionTypeRule,
          inputParameter1Rule: this.formValidate.inputParameter1Rule,
          inputParameter2Rule: this.formValidate.inputParameter2Rule,
          inputParameter3Rule: this.formValidate.inputParameter3Rule,
          inputParameter4Rule: this.formValidate.inputParameter4Rule,
          inputParameter1Name: this.formValidate.inputParameter1Name,
          inputParameter2Name: this.formValidate.inputParameter2Name,
          inputParameter3Name: this.formValidate.inputParameter3Name,
          inputParameter4Name: this.formValidate.inputParameter4Name,
          authCodeType: this.formValidate.authCodeType,
          imgCodeType: this.formValidate.imgCodeType,
          inputAuthCodeRule: this.formValidate.inputAuthCodeRule,
          authCodeRule: this.formValidate.authCodeRule,
          getAuthCodeUrl: this.formValidate.getAuthCodeUrl,
          smsInputRule: this.formValidate.smsInputRule,
          sendSmsRule: this.formValidate.sendSmsRule,
          sliderPosition: this.formValidate.sliderPosition,
          submitButtonRule: this.formValidate.submitButtonRule,
          loginMaxWaitTime: this.formValidate.loginMaxWaitTime,
          loginSuccessJudgeRule: this.formValidate.loginSuccessJudgeRule
        } = securityLoginQueryData.data.data)
      } else {
        this.formValidate.imgCodeType = citySocialSecurityData.data.data[0].citySocialSecurity
      }
      this.cityImgCodeType = citySocialSecurityData.data.data
    })()
  }
}
</script>

